<aside
  x-bind:class="sidebarVisible ? 'translate-x-0' : '-translate-x-full'"
  class={[
    "-translate-x-full absolute left-0 top-0 z-9999 flex h-screen w-65 flex-col overflow-y-hidden justify-between",
    "bg-black duration-300 ease-linear shadow-lg sm:shadow-none dark:bg-boxdark lg:static lg:translate-x-0"
  ]}
  @click.outside="sidebarVisible = false"
>
  <section>
    <div class="flex items-center justify-between gap-2 px-6 py-4">
      <a href="/" class="flex items-center">
        <img src={~p"/images/logo-2024-03-20.png"} alt="Pinchflat" class="w-auto" />
      </a>

      <button class="block mt-3 lg:hidden" @click.stop="sidebarVisible = !sidebarVisible">
        <.icon name="hero-arrow-left" class="fill-current" />
      </button>
    </div>
    <div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
      <nav class="mt-3 px-4 py-4 lg:px-6">
        <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">
          <span>MENU</span>
        </h3>
        <div class="flex flex-col justify-between">
          <ul class="mb-6 flex flex-col gap-1.5">
            <.sidebar_item icon="hero-home" text="Home" href={~p"/"} />
            <.sidebar_item icon="hero-tv" text="Sources" href={~p"/sources"} />
            <.sidebar_item icon="hero-adjustments-vertical" text="Media Profiles" href={~p"/media_profiles"} />
            <.sidebar_submenu
              icon="hero-cog-6-tooth"
              text="Config"
              current_path={Phoenix.Controller.current_path(@conn)}
            >
              <:submenu text="Settings" href={~p"/settings"} />
              <:submenu text="App Info" href={~p"/app_info"} />
            </.sidebar_submenu>
          </ul>
        </div>
      </nav>
    </div>
  </section>
  <section>
    <nav class="px-4 py-4 lg:px-6">
      <ul class="mb-6 flex flex-col gap-1.5">
        <.sidebar_item
          icon="hero-book-open"
          text="Docs"
          target="_blank"
          href="https://github.com/kieraneglin/pinchflat/wiki"
        />
        <.sidebar_item icon="hero-cog" text="Github" target="_blank" href="https://github.com/kieraneglin/pinchflat" />
        <li>
          <span
            class={[
              "font-medium text-bodydark1",
              "group relative flex items-center gap-2.5 rounded-sm px-4 py-2 duration-300 ease-in-out",
              "duration-300 ease-in-out cursor-pointer",
              "hover:bg-graydark dark:hover:bg-meta-4"
            ]}
            phx-click={show_modal("donate-modal")}
          >
            <.icon name="hero-currency-dollar" /> Donate
          </span>
        </li>
        <li>
          <span
            class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm"
            x-on:click={"markVersionAsSeen('#{Application.spec(:pinchflat)[:vsn]}')"}
          >
            <span>Pinchflat {Application.spec(:pinchflat)[:vsn]}</span>
            <a
              href="https://github.com/kieraneglin/pinchflat/releases"
              target="_blank"
              class="bg-meta-2 text-boxdark px-1.5 rounded-full text-xs"
              x-cloak
              x-show={"!isVersionSeen('#{Application.spec(:pinchflat)[:vsn]}')"}
            >
              NEW
            </a>
          </span>
          <span class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm">
            yt-dlp {Settings.get!(:yt_dlp_version)}
          </span>
        </li>
      </ul>
    </nav>
  </section>
</aside>
